<template>
    <div class="rate">
        <span v-for="index in currentRate" :key="'active-' + index" class="star active">
        <i class="iconfont icon-star-fill"></i>
        </span>
    </div>
</template>

<script>
export default {
    name: 'Rate',
    data() {
        return {
            currentRate: 5, // 当前评分
        }
    },
    methods: {
        // 移除点击选择功能，因为不需要选择
    },
    props: {
        modelValue: {
            type: Number,
            default: 0
        }
    },
    watch: {
        modelValue(newVal) {
            this.currentRate = newVal
        }
    }
}
</script>

<style scoped lang="less">
.rate {
    display: inline-flex;

    .star {
        color: #ccc;
        font-size: 30px;
    }

    .star.active {
        color: #F40C0C;
    }
}
</style>
